
<template>
<!-- 刘畅2020-10-31(未完成) -->
<!-- 
  金额，状态，名称，条件，有效期
  useScope:使用范围
 -->
 <!-- :style="`left:${scrollLeft}rpx;`" -->
<view>
  <view 
    class="content"
    
    @click.stop="cardClick"
    ref="cardSelf"
  >
    <view 
      class="card-money"
      :class="{ 'status-change':statusChange }"
    >
      <text>
        <text class="money-dot">{{ moneSymbol }}</text>
        <text class="money-num">{{ money }}</text>
      </text>
      <text class="font-26">{{ useScoped }}</text>
    </view>
    
    <view class="card-condtion">
      <view class="condtion-top">
        <text 
          class="condtion-name"
          :class="{ 'name-status-change':statusChange }"
        >{{ name }}</text>
        <!-- <text v-if="isShowDetailDot" class="condtion-astrict">{{ astrict }}</text> -->
      </view>
      <text class="condtion-astrict-undetail">{{ astrict }}</text>
      <text class="font-26 condtion-end-time">有效期至：{{ endTime }}</text>
      <!-- <view class="condtion-detail" v-if="isShowDetailDot" @click="isShowDetail = !isShowDetail">
       <text>查看详情</text>
       <text class="">图标</text>
      </view> -->
    </view>

    <view class="card-active">
      <button 
        class="font-26 active-btn"
        :class="{ 'status-change':statusChange }"
        @click.stop="btnClick"
      >{{ action }}</button>
    </view>
    <!-- 点击查看详情部分 -->
    <!-- <view class="card-detail" v-show="isShowDetail">

    </view> -->



  </view>
</view>
</template>

<script>
export default {
  name:'fu-coupon',
  data() {
    return {
      isShowDetail:false,
      // isShowDetailDot:false,
      statusChange:false,
      startX:'', // 滑动相关属性
      scrollLeft:'',// 操作style设置偏移量
    }
  },
  props: {
    money: {
      type:Number,
      required:true
    },
    useScoped: {
      type:String,
      required:true
    },
    endTime: {
      type:String,
      required:true
    },
    astrict: {
      type:String,
      required:true
    },
    name: {
      type:String,
      default:'优惠券'
    },
    action: {
      type:String,
      default:'去使用'
    },
    moneSymbol: {
      type:String,
      default:'￥'
    }
  },
  create() {},
  mounted() {
    // this.cardDOM = document.querySelector('.content')
    this.cardDOM = this.$refs.cardSelf.$el
  },
  methods:{
    btnClick() {
      this.$emit('btnClick',{
        that:this
      })
    },
    cardClick() {
      this.$emit('cardClick',{
        that:this
      })
    },
    // touchS(event) {
    //   if(event.touches.length === 1) {
    //     // 设置起点位置
    //     this.startX = event.touches[0].clientX
    //   }
    // },
    // touchM(event) {
    //   if(event.touches.length === 1) {
    //     // 手指移动时水平方向位置
    //     let handMoveX = event.touches[0].clientX
    //     // 手指起始点位置与移动期间的差值
    //     let differenceX = this.startX - handMoveX
    //     this.scrollLeft = event.touches[0].clientX
    //   }
    // },
    // touchE(event) {
    //   this.scrollLeft = 0
    // },
  },
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  position: relative;
  justify-content: space-between;
  width: 100%;
  height: 180rpx;
  margin-top: 20rpx;
  padding: 0 !important;
  border-radius: 20rpx;
  background: #FFFFFF;
  box-shadow: 0 8rpx 8rpx rgb(190, 187, 187);
  .card-money {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 180rpx;
    flex: 2;
    padding: 30rpx 0; 
    border-radius: 20rpx 0 0 20rpx;
    text-align: center;
    color: #FFFFFF;
    background: linear-gradient(to left top, rgba(245, 50, 50, 1), rgba(242, 245, 48, 1));
    .money-dot {
      font-size: 30rpx;
    }
    .money-num {
      font-size: 50rpx;
      font-weight: 800;
    }
  }
  .card-condtion {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 4;
    .condtion-top {
      display: flex;
      justify-content: space-between;
      height: 40rpx;
      margin-left: 30rpx;
      padding-top: 10rpx;
      line-height: 40rpx;
      .condtion-name {
        position: relative;
        display: inline-block;
        height: 40rpx;
        color: #FFFFFF;
        font-size: 18rpx;
        background: linear-gradient(to left top, rgba(245, 50, 50, 1), rgb(236, 36, 1));
        &:before {
          position: absolute;
          right: 100%;
          content:'';
          display: inline-block;
          height: 40rpx;
          width: 20rpx;
          border-radius: 20rpx 0 0 20rpx;
          background: linear-gradient(to left top, rgba(245, 50, 50, 1), rgb(236, 36, 10));
        }
        &:after {
          position: absolute;
          left: 100%;
          content:'';
          display: inline-block;
          height: 40rpx;
          width: 20rpx;
          border-radius: 0 20rpx 20rpx 0;
          background: linear-gradient(to left top, rgba(245, 50, 50, 1), rgb(236, 36, 10));
        }
      }
      .condtion-astrict {
        flex-basis:270rpx;
        text-align: left;
        margin-left: 15rpx;
        font-size: 36rpx;
        font-weight: 700;
      }
    }
    
    .condtion-end-time {
      margin-left: 15rpx;
      padding-bottom: 10rpx;
      color: rgb(73, 71, 71);
    }
    .condtion-detail {
      display: flex;
      justify-content: space-between;
      font-size: 16rpx;
      padding: 0 15rpx 10rpx 15rpx; 
      color: rgba(148, 144, 144,1);
    }
  }
  .card-active {
    display: flex;
    flex: 1;
    align-items: center;
    height: 100%;
    padding-right: 10rpx;
    .active-btn {
      height: 60rpx;
      width: 100%;
      padding: 0;
      color: #FFFFFF;
      border-radius: 20rpx;
      text-align: center;
      line-height: 60rpx;
      background: rgba(245, 50, 50, .9);
    }
  }

  .card-detail {
    position: absolute;
    top: 105%;
    z-index: 999;
    width: 100%;
    height: 120rpx;
    background: rgba(187, 187, 187,.7);
    border-radius: 20rpx;
  }
}

.unshowDetail {
  padding-bottom: 20rpx;
}
.status-change {
  background: #949090 !important;
}
.name-status-change {
  background: #949090 !important;
  &:before {
    background: #949090 !important;
  }
  &:after {
    background: #949090 !important;
  }
}
.condtion-astrict-undetail {
  text-align: left;
  margin-left: 15rpx;
  font-size: 34rpx;
  font-weight: 700;
}

.font-26 {
  font-size: 26rpx;
}
</style>